<template>
  <el-dropdown v-if="data && dataName" placement="bottom-end">
    <span class="flex-start-center">
      {{ title ? `${title}:` : '' }}
      {{ proxy.$arrFind(options, data[dataName], 'value', 'label') }}
      <el-icon class="el-icon--right">
        <arrow-down />
      </el-icon>
    </span>
    <template #dropdown>
      <el-dropdown-menu>
        <el-dropdown-item v-for="item in options" @click="searchBtn(item)" :class="{
          'text-color-primary': item.value === data[dataName]
        }">{{ item.label }}</el-dropdown-item>
      </el-dropdown-menu>
    </template>
  </el-dropdown>
</template>
<script setup lang="ts">
const { proxy } = getCurrentInstance() as any;
const props = withDefaults(
  defineProps<{
    data?: any;
    dataName?: any;
    title?: string;
    options?: any;
  }>(),
  {
    options: [],
  },
);
const emit = defineEmits<{
  //fn为父组件引入子组件是定义的子组件事件属性，可随意定义
  (event: 'searchBtn'): void;
}>();
const searchBtn = (row: any) => {
  props.data[props.dataName] = row.value
  emit('searchBtn');
};
onMounted(() => {

});
</script>
<style scoped lang="scss"></style>